<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="type" content="guides2"/>
<meta name="account" content="false"/>
<meta name="viewport" content="width=device-width"/>
<title>CNBlockly - 进阶教程 - 1 - 面向对象初步</title>
<link rel="stylesheet" href="../css/mdui.min.css">
<link rel="stylesheet" href="../css/style.css">
<script src="../js/mdui.min.js"></script><script src="../js/account.js"></script>

</head>
<body class="mdui-bottom-nav-fixed">
<div class="mdui-toolbar mdui-color-indigo">
  <a href="../guides.html" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">arrow_back</i></a>
  <span class="mdui-typo-title">积木编辑器前置教程 - 面向对象初步</span>
</div>
<div class="mdui-card">
  <div class="mdui-card-header">
	<img class="mdui-card-header-avatar" scr="https://ws1.sinaimg.cn/large/ebc3e24aly1fk46infk3gj208c08ct8z.jpg">
    <div class="mdui-card-header-title">积木编辑器前置教程</div>
    <div class="mdui-card-header-subtitle">by Bloody_Phono</div>
  </div>
      <div class="mdui-card-primary">
        <div class="mdui-card-primary-title">面向对象初步</div>
		<div class="mdui-card-content mdui-typo"><p><em>本篇教程是为了帮助大家理解《积木编辑器教程》而撰写的前置教程，只简单说明一下积木编辑器中用到的属于”面向对象“的内容，本身并不能当作”面向对象教程“食用。</em></p><hr /><h1>一、面向对象</h1><h4>1.什么是”面向对象“？</h4><p>面向对象的意思，不是说你找了个女朋友，你面对着她，就叫”面向对象“。<br />对象，简单来说，可以理解为将一堆属性、指标给打包起来，打好的这个包，就叫对象。比如我们的积木块。它有连接、输入、颜色、帮助信息等等各种属性，这样的积木块，就是一个对象。<br />不那么严谨地来说，围绕着对象展开的程序就算是面向对象（面向对象是一种思想）。</p><h4>2.对象的食用方式？</h4><p>对象是由<strong>类</strong>生成。也即是说，类是对象的模板，对象是类的实例，对象由类实例化而来。<br />对象的属性，叫做它的成员。成员大概可以按<strong>数据</strong>和<strong>函数</strong>分为两类,也就是所谓的成员数据和成员函数。<br />比如你定义了一个猫猫类。猫猫有个成员数据叫<code>name</code>，记录名字，比如<code>狗狗</code>；而它也有个成员函数叫<code>bark</code>，当你调用它的这个函数时，会给你发送&quot;Meow~&quot;的文本消息。成员函数可以调用成员数据，比如你完全可以让它的<code>bark</code>实现这种效果：<br />&quot;嘿老哥，我的名字叫狗狗！&quot;<br />在积木编辑器里，积木的成员函数的名字是固定的，但是内容是自定义的。<strong>事实上，变形、存取器等高级内容就是通过<code>mutationToDom</code>、<code>domToMutation</code>、<code>decompose</code>以及<code>compose</code>等成员函数指定的，而这些内容是不被积木编辑器支持的，需要在积木编辑器的基础上手动改代码。</strong><br />在所有的成员函数中，有一个函数，叫构造函数，也就是某个对象在诞生时执行的函数。如果你有什么希望对象在诞生时需要做的事情，就该写在这个函数里。</p><h4><strong>举个栗子</strong></h4><p>下面这个积木<br /><img style="height:89px;width:194px" src="http://bbs.pvpin.com/uploads/files/1503720553709-image.png" class="img-responsive img-markdown" /><br />它的表现代码是下面这样：<br /><img style="height:282px;width:614px;" src="http://bbs.pvpin.com/uploads/files/1503720536807-image.png" class="img-responsive img-markdown" /><br />其中最右上角的<code>&#123;</code>和最左下角的<code>'&#125;'</code>表明，这是一个<code>map</code>。也就是说，我们用<code>map</code>来作为这当中的介质。如上图所示，这个<code>map</code>只有一个关键字<code>init</code>。而这个关键字对应的值，是一个函数。是的，这个<code>init</code>就是构造函数。积木的一些基本属性，都是在构造函数中指定的。</p>
</div>
		<div class="mdui-card-actions">
        <a class="mdui-btn mdui-ripple mdui-ripple-white" href="../guides.html">返回</a>
		<a class="mdui-btn mdui-ripple mdui-ripple-white" href="advanced-2.html">下一章</a>
		</div>
  </div>
</div>
</br>
<iframe name="content_frame" marginwidth=0 marginheight=0 width=100% height=100 src="../copyright.html" frameborder=0></iframe>
<div id="nav"></div>
</body>
</html>